<template>
  <div class="lightprotection-monitor">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>防光设备管理</h2>
      <div class="header-actions">
        <el-button type="primary" icon="el-icon-refresh" @click="refreshData">刷新数据</el-button>
        <el-button type="success" icon="el-icon-setting" @click="showSettings">参数配置</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-row :gutter="20">
        <!-- 左侧：运行日志 -->
        <el-col :span="8">
          <div class="log-section">
            <div class="section-header">
              <div class="header-title">
                <div class="title-decorator"></div>
                <span>运行日志</span>
              </div>
            </div>
            
            <!-- 表格表头 -->
            <div class="log-table">
              <div class="table-header">
                <div class="header-cell">序号</div>
                <div class="header-cell">时间</div>
                <div class="header-cell">日志内容</div>
              </div>
              
              <!-- 表格内容 -->
              <div class="table-body" v-loading="logLoading">
                <div v-if="logs.length === 0 && !logLoading" class="no-data">
                  <div class="no-data-icon">
                    <svg viewBox="0 0 24 24" width="48" height="48">
                      <!-- 放大镜图标 -->
                      <circle cx="11" cy="11" r="8" fill="none" stroke="#409eff" stroke-width="2"/>
                      <path d="m21 21-4.35-4.35" stroke="#409eff" stroke-width="2"/>
                      <!-- 文件图标 -->
                      <rect x="6" y="4" width="8" height="10" rx="1" fill="#409eff" opacity="0.3"/>
                      <line x1="8" y1="7" x2="12" y2="7" stroke="#409eff" stroke-width="1"/>
                      <line x1="8" y1="9" x2="12" y2="9" stroke="#409eff" stroke-width="1"/>
                      <line x1="8" y1="11" x2="10" y2="11" stroke="#409eff" stroke-width="1"/>
                    </svg>
                  </div>
                  <div class="no-data-text">暂无数据</div>
                </div>
                
                <div v-for="(log, index) in logs" :key="index" class="table-row">
                  <div class="table-cell">{{ index + 1 }}</div>
                  <div class="table-cell">{{ log.time }}</div>
                  <div class="table-cell">{{ log.content }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 右侧：设备控制 -->
        <el-col :span="16">
          <div class="device-section">
            <!-- 设备控制卡片 -->
            <div v-for="device in devices" :key="device.id" class="device-card">
              <div class="device-header">
                <div class="device-info">
                  <div class="device-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                      <!-- 窗帘图标 -->
                      <rect x="2" y="4" width="20" height="16" rx="2" fill="none" stroke="#409eff" stroke-width="2"/>
                      <line x1="2" y1="8" x2="22" y2="8" stroke="#409eff" stroke-width="2"/>
                      <line x1="2" y1="12" x2="22" y2="12" stroke="#409eff" stroke-width="2"/>
                      <line x1="2" y1="16" x2="22" y2="16" stroke="#409eff" stroke-width="2"/>
                      <circle cx="20" cy="6" r="1" fill="#409eff"/>
                    </svg>
                  </div>
                  <div class="device-title-info">
                    <div class="device-title">{{ device.alias || device.deviceName }}</div>
                    <div class="device-status-label">设备状态: 
                      <span :class="{'status-online': device.opStatus === '1', 'status-offline': device.opStatus === '0'}">
                        {{ device.opStatus === '1' ? '在线' : '离线' }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 控制按钮区域 -->
              <div class="control-buttons">
                <el-button 
                  class="control-btn" 
                  :class="{ active: currentAction === 'open' }"
                  @click="controlDevice('open', device)"
                >
                  <div class="btn-content">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                      <!-- 全开图标 -->
                      <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
                      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" fill="none"/>
                      <line x1="9" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    <span>全开</span>
                  </div>
                </el-button>

                <el-button 
                  class="control-btn" 
                  :class="{ active: currentAction === 'pause' }"
                  @click="controlDevice('pause', device)"
                >
                  <div class="btn-content">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                      <!-- 暂停图标 -->
                      <rect x="6" y="4" width="4" height="16" fill="currentColor"/>
                      <rect x="14" y="4" width="4" height="16" fill="currentColor"/>
                    </svg>
                    <span>暂停</span>
                  </div>
                </el-button>

                <el-button 
                  class="control-btn active" 
                  :class="{ active: currentAction === 'close' }"
                  @click="controlDevice('close', device)"
                >
                  <div class="btn-content">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                      <!-- 全关图标 -->
                      <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
                      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" fill="none"/>
                      <circle cx="12" cy="12" r="2" fill="currentColor"/>
                    </svg>
                    <span>全关</span>
                  </div>
                </el-button>
              </div>
            </div>

            <!-- 空白区域保持简洁性 -->
            <div v-if="devices.length === 0" class="blank-area">
              <div class="no-device-text">暂无设备</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getLightProtectionDeviceList, getLightProtectionDeviceLogs, controlLightProtectionDevice } from "@/api/archives/lightprotection";

export default {
  name: "LightProtectionMonitor",
  data() {
    return {
      // 运行日志数据
      logs: [],
      // 设备数据
      devices: [],
      // 当前操作状态
      currentAction: 'close', // 默认全关状态为高亮
      // 加载状态
      loading: false,
      logLoading: false
    }
  },
  created() {
    this.getDeviceList();
    this.getLogsList();
  },

  mounted() {
    this.initData()
  },

  methods: {
    // 获取设备列表
    async getDeviceList() {
      this.loading = true;
      try {
        const response = await getLightProtectionDeviceList();
        console.log('设备列表响应:', response);
        if (response && response.code === 200) {
          this.devices = Array.isArray(response.data) ? response.data : [];
        } else {
          console.warn('设备列表响应异常:', response);
          this.devices = [];
          if (response && response.msg) {
            this.$message.warning(response.msg);
          }
        }
      } catch (error) {
        console.error('获取设备列表失败:', error);
        this.devices = [];
        this.$message.error("获取设备列表失败");
      } finally {
        this.loading = false;
      }
    },

    // 获取运行日志
    async getLogsList() {
      try {
        this.logLoading = true;
        const response = await getLightProtectionDeviceLogs();
        console.log('运行日志响应:', response);
        
        if (response.code === 200 && Array.isArray(response.data)) {
          const logData = response.data;
          this.logs = logData.map(log => ({
            id: log.id,
            time: log.createTime,
            content: log.deviceOpLog,
            deviceName: log.deviceName,
            type: log.logType
          }));
        } else {
          this.logs = [];
          if (response.data && !Array.isArray(response.data)) {
            this.$message.warning('日志数据格式不正确');
          }
        }
      } catch (error) {
        console.error('获取运行日志失败:', error);
        this.logs = [];
        this.$message.error('获取运行日志失败');
      } finally {
        this.logLoading = false;
      }
    },

    // 初始化数据
    initData() {
      this.refreshData()
    },

    // 刷新数据
    refreshData() {
      this.getDeviceList();
      this.getLogsList();
    },

    // 显示设置
    showSettings() {
      this.$message.info('参数配置功能开发中...');
    },

    // 控制设备
    async controlDevice(action) {
      try {
        this.currentAction = action;
        
        // 添加日志记录
        const actionText = {
          'open': '全开',
          'pause': '暂停', 
          'close': '全关'
        };
        
        const newLog = {
          time: this.formatTime(new Date()),
          content: `窗帘设备执行${actionText[action]}操作`
        };
        
        this.logs.unshift(newLog);
        
        // 实际应调用API
        // await controlLightProtectionDevice({ action, deviceId: 1 });
        
        this.$message.success(`设备${actionText[action]}操作成功`);
      } catch (error) {
        this.$modal.msgError("设备控制失败");
        console.error(error);
      }
    },

    // 格式化时间
    formatTime(date) {
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    }
  }
}
</script>

<style scoped>
/* 整体容器 */
.lightprotection-monitor {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 页面标题 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 主要内容区域 */
.main-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 区域标题 */
.section-header {
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.title-decorator {
  width: 4px;
  height: 20px;
  background: #409eff;
  margin-right: 10px;
  border-radius: 2px;
}

/* 日志区域 */
.log-section {
  height: 600px;
  display: flex;
  flex-direction: column;
}

.log-table {
  flex: 1;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  overflow: hidden;
}

.table-header {
  display: flex;
  background: #f5f7fa;
  border-bottom: 1px solid #e6e6e6;
}

.header-cell {
  flex: 1;
  padding: 12px 15px;
  font-weight: 600;
  color: #333;
  text-align: center;
  border-right: 1px solid #e6e6e6;
}

.header-cell:last-child {
  border-right: none;
}

.table-body {
  height: calc(100% - 45px);
  overflow-y: auto;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  padding: 10px 15px;
  color: #666;
  text-align: center;
  border-right: 1px solid #f0f0f0;
  font-size: 14px;
}

.table-cell:last-child {
  border-right: none;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #999;
}

.no-data-icon {
  margin-bottom: 15px;
}

.no-data-icon svg {
  opacity: 0.6;
}

.no-data-text {
  font-size: 14px;
  color: #c0c4cc;
}

/* 设备区域 */
.device-section {
  height: 600px;
  display: flex;
  flex-direction: column;
}

/* 设备卡片 */
.device-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.device-header {
  margin-bottom: 30px;
}

.device-info {
  display: flex;
  align-items: center;
}

.device-icon {
  margin-right: 15px;
  padding: 8px;
  background: #f0f9ff;
  border-radius: 6px;
}

.device-title-info {
  flex: 1;
}

.device-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.device-status-label {
  font-size: 14px;
  color: #666;
}

/* 控制按钮区域 */
.control-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.control-btn {
  min-width: 120px;
  height: 60px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  background: #fff;
  color: #606266;
  transition: all 0.3s ease;
  padding: 0;
}

.control-btn:hover {
  border-color: #409eff;
  color: #409eff;
  background: #f0f9ff;
}

.control-btn.active {
  border-color: #409eff;
  background: #409eff;
  color: #fff;
}

.control-btn.active:hover {
  background: #337ecc;
  border-color: #337ecc;
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.btn-content span {
  font-size: 14px;
  font-weight: 500;
}

/* 空白区域 */
.blank-area {
  flex: 1;
  background: #fafafa;
  border-radius: 8px;
  border: 2px dashed #ddd;
  min-height: 200px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .control-buttons {
    flex-wrap: wrap;
  }
  
  .control-btn {
    min-width: 100px;
  }
}

@media (max-width: 768px) {
  .main-content .el-row {
    flex-direction: column;
  }

  .log-section,
  .device-section {
    height: auto;
    min-height: 400px;
  }

  .page-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .control-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .control-btn {
    width: 200px;
  }
}

/* 设备状态样式 */
.status-online {
  color: #67c23a;
  font-weight: 600;
}

.status-offline {
  color: #f56c6c;
  font-weight: 600;
}

/* 暂无设备提示 */
.no-device-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #c0c4cc;
  font-size: 16px;
}
</style>